<!DOCTYPE HTML>
<html>
	<head>
		<title>FoodieShop</title>
    
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="vendors/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
        <script src="assets/scripts.js"></script>
        
        
        
  
		<!-- Custom Theme files -->
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<!-- Custom Theme files -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="application/x-javascript"> addEventListener("load", function() {
				setTimeout(hideURLbar, 0); }, false); function hideURLbar(){
				window.scrollTo(0,1); } 
            
        
        </script>

			<!----webfonts-- -->
			<!---<link href='http://fonts.googleapis.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900' 
				rel='stylesheet' type='text/css'>- -->
	</head>
	<body>
		 <!-- wizard -->
                    <div class="row-fluid section">
                         <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">Form Wizard</div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                    <div id="rootwizard">
                                        <div class="navbar">
                                          <div class="navbar-inner">
                                            <div class="container">
                                        <ul>
                                            <li><a href="#tab1" data-toggle="tab">Step 1</a></li>
                                            <li><a href="#tab2" data-toggle="tab">Step 2</a></li>
                                            <li><a href="#tab3" data-toggle="tab">Step 3</a></li>
                                        </ul>
                                         </div>
                                          </div>
                                        </div>
                                        <div id="bar" class="progress progress-striped active">
                                          <div class="bar"></div>
                                        </div>
                                        <div class="tab-content">
                                            <div class="tab-pane" id="tab1">
                                               <form class="form-horizontal">
                                                  <fieldset>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">Name</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">Email</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">Phone</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                  </fieldset>
                                                </form>
                                            </div>
                                            <div class="tab-pane" id="tab2">
                                                <form class="form-horizontal">
                                                  <fieldset>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">Address</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">City</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">State</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                  </fieldset>
                                                </form>
                                            </div>
                                            <div class="tab-pane" id="tab3">
                                                <form class="form-horizontal">
                                                  <fieldset>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">Company Name</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">Contact Name</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">Contact Phone</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                  </fieldset>
                                                </form>
                                            </div>
                                            <ul class="pager wizard">
                                                <li class="previous first" style="display:none;"><a href="javascript:void(0);">First</a></li>
                                                <li class="previous"><a href="javascript:void(0);">Previous</a></li>
                                                <li class="next last" style="display:none;"><a href="javascript:void(0);">Last</a></li>
                                                <li class="next"><a href="javascript:void(0);">Next</a></li>
                                                <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
                                            </ul>
                                        </div>  
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>
	            <!-- /wizard -->

		<div class="main">
		    <form class="first" action="storeApply" method="post" enctype="multipart/form-data">
			    <ul class="regist_first">
				    <li class="storename">店铺名称
					    <li>
						    <input type="text" class="storename_text" name="shopName" size=30>
						</li>
					</li>
					<li class="email">邮箱
					    <li>
						    <input type="text" class="email_text" name="email" size=30>
						</li>
					</li>
					<li class="storetype">店铺类型
					    <li>
						    <select class="storetype" name="type">
							    <option value="中餐">中餐类</option>
								<option value="西餐">西餐类</option>
								<option value="小吃/零食">小吃/零食</option>
								<option value="甜品/饮品">甜品/饮品</option>
								<option value="水果/蔬菜">水果/蔬菜</option>
								<option value="鲜花/蛋糕">鲜花/蛋糕</option>
							</select>
						</li>
					</li>
					<li>是否配送
					    <span><input class="radio" type="radio" name="distribution" value="1" checked="checked"/>是
						<input class="radio" type="radio" name="distribution" value="0"/>否</span>
					</li>
					<li class="storeadress">店铺地址
					    <li>
						    <input type="text" class="storename_text" name="address" size=30>
						</li>
                       <div class="clsInit">

                           省：<select id="selF" name="province"><option>请选择</option></select>
                           市：<select id="selT" name="city"><option>请选择</option></select>
                           区：<select id="selC" name="town"><option>请选择</option></select>
                     
                            输入详细地址：<input name="detailAddress">
                        </div>
					</li>
					<li class="step">
					    <input id="first_back"  type="button" value="上一步"/>
						<input id="first_next" type="button" value="下一步"/>
					</li>
				</ul>
				<ul id="second">
                    <div id="mysecond">
				    <li class="sellerame">商家姓名
					    <li>
						    <input type="text" class="sellername_text" name="sellerName" size=30>
						</li>
					</li>
					<li class="phone">手机
					    <li>
						    <input type="text" class="email_text" name="mobile" size=30>
						</li>
					</li>
					<li class="passwd">密码
					    <li>
						    <input type="password" class="passwd_text" name="passwd" size=30>
						</li>
					</li>
					<li class="passwd">请再次输入密码
					    <li>
						    <input type="password" class="passwd_text" name="passwd_check" size=30>
						</li>
					</li>
					<li class="idcard">身份证号
					    <li>
						    <input type="text" class="email_text" name="idCard" size=30>
						</li>
					</li>
					<li class="idcardfile">
					    <li class="obverseCardPhoto">身份证正面照
					                 <input type="file" name="obverseCardPhoto" style="width:160px;" />
					    </li>
						<li class="reverseCardPhoto">身份证反面照
					                 <input type="file" name="reverseCardPhoto" style="width:160px;" />
					    </li>
					</li>
					<li class="step">
					    <input  id="second_back" type="button" value="上一步"/>
						<input  id="second_next" type="button" value="下一步"/>
					</li>
                </div>
				</ul>
				<ul id="third">
				    <li class="shopPhoto">
					    <li class="shopfrontPhoto">店铺照片
					                 <input type="file" name="shopfrontPhoto" style="width:160px;" />
					    </li>
						<li class="shopinsidePhoto">店铺内部照片
					        <input type="file" name="shopinsidePhoto" style="width:160px;" />
					    </li>
					</li>
					<li class="license">
					    <li class="businessLicense">营业执照
						    <input type="file" name="businessLicense" style="width:160px;" />
						</li>
						<li class="cateringServiceLicense">餐饮许可证
						    <input type="file" name="cateringServiceLicense" style="width:160px;" />
						</li>
					</li>
					<li class="step">
					    <input  id="third_back" type="button" value="上一步"/>
						<input id="submit" type="submit" value="提  交"/>
					</li>
				</ul>
			</form>
            
        
            
		</div>



    <script>
    
       $(function(){
        function objInit(obj){
            return $(obj).html('<option>请选择</option>');
        }
        var arrData={
            山东省:{泰安市:'新泰市,莱芜市',
                    济宁市:'邹城,兖州'},
            四川省:{成都市:'武侯区,青羊区',
                    南充市:'南充，郊区'},
            江苏省:{南京市:'鼓楼区,玄武湖',
                    南通市:'通州湾,三余镇'}
        };
        $.each(arrData,function(pF){
            $('#selF').append('<option>'+pF+'</option>');
        });
        $('#selF').change(function(){
            objInit('#selT');
            objInit('#selC');
            $.each(arrData,function(pF,pS){
                if($('#selF option:selected').text()==pF){
                    $.each(pS,function(pT,pC){
                        $('#selT').append('<option>'+pT+'</option>');
                    });
                    $('#selT').change(function(){
                        objInit('#selC');
                        $.each(pS,function(pT,pC){
                            if($('#selT option:selected').text()==pT){
                                $.each(pC.split(","),function(){
                                    $('#selC').append('<option>'+this+'</option>');
                                })
                            }
                        })
                        
                    });
                }
            })
        });
    });
        
        $("#third").hide();
        $("#mysecond").hide();
        $("#first_next").on("click",function(){
            $(".regist_first").hide();
            $("#mysecond").show();
        });
        $("#second_next").on("click",function(){
            $(".regist_first").hide();
            $("#mysecond").hide();
            $("#third").show();
        });
        $("#second_back").on("click",function(){
            $(".regist_first").show();
            $("#mysecond").hide();
            $("#third").hide();
        });
        $("#third_back").on("click",function(){
            $(".regist_first").hide();
            $("#mysecond").show();
            $("#third").hide();
        });
        
    </script>
	</body>
</html>

